<!--患者信息-->
<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'

defineOptions({
  name: 'PatientInfo'
})

const formData = reactive({
    consultationList: "", // 就诊列表
    name: "", // 姓名
    gender: "", // 性别
    dateOfBirth: "", // 出生日期
    age: "", // 年龄
    occupation: "", // 职业
    idNumber: "", // 身份证号
    onsetDate: "", // 发病日期
    returnVisit: false, // 复诊
    unit: "", // 单位
    unitPhoneNumber: "", // 单位电话
    address: "", // 住址
    guardian: "", // 监护人
    homePhoneNumber: "", // 家庭电话
    weight: '', // 体重
    allergicMedications: "", // 过敏药物
    remarks: "", // 摘要(备注)
    infectiousDiseaseReportTime: "", // 传染病报告时间
    feeType: "", // 费别
    patientDisposition: "", // 病人去向
    bloodPressure1: "", // 血压
    bloodPressure2: "" // 血压
  })

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

</script>

<template>
  <div class="patientInfo">
    <el-form :inline="true" :model="formData" label-width="70px"  class="form-inline" label-position="right">
      <div class="flex ac">
        <el-form-item label="就诊列表">
          <div class="flex ac">
            <el-select v-model="formData.consultationList" placeholder="请选择门诊">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input class="ml10" v-model="formData.name" placeholder="请输入"></el-input>
            <el-select v-model="formData.gender" class="ml10" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-form-item>
        <div class="flex ac">
          <el-form-item label="出生日期">
            <el-date-picker v-model="formData.dateOfBirth" type="date" placeholder="请选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="年龄">
            <div class="flex ac">
              <el-input v-model="formData.age" placeholder="请输入"></el-input>
              <el-dropdown>
                <el-button class="ml10" type="primary">扩展功能<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>健康档案调阅</el-dropdown-item>
                    <el-dropdown-item>新冠相关查询</el-dropdown-item>
                    <el-dropdown-item>随访管理</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-form-item>
        </div>
      </div>

      <div class="flex ac">
        <div class="flex ac">
          <el-form-item label="职业">
            <el-select v-model="formData.occupation" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="formData.idNumber" placeholder="请输入" style="width: 217px"></el-input>
          </el-form-item>
        </div>

        <div class="flex ac">
          <el-form-item label="发病日期">
            <el-date-picker v-model="formData.onsetDate" type="date" placeholder="请选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="复诊">
            <el-checkbox v-model="formData.returnVisit"></el-checkbox>
          </el-form-item>
        </div>
      </div>

      <div class="flex ac">
        <el-form-item label="单位">
          <el-input v-model="formData.unit" placeholder="请输入" style="width: 470px;"></el-input>
        </el-form-item>
        <el-form-item label="单位电话">
          <el-input v-model="formData.unitPhoneNumber" placeholder="请输入"></el-input>
        </el-form-item>
        <el-button style="margin-left: 30px" plain type="primary">保存</el-button>
      </div>

      <div class="flex ac">
        <div class="flex ac">
          <el-form-item label="住址">
            <el-input v-model="formData.address" placeholder="请输入" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="监护人">
            <el-input v-model="formData.guardian" placeholder="请输入"></el-input>
          </el-form-item>
        </div>
        <div class="flex ac">
          <el-form-item label="家庭电话">
            <el-input v-model="formData.homePhoneNumber" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="体重">
            <el-input v-model="formData.weight" placeholder="请输入"></el-input>
            <span class="ml10">kg</span>
          </el-form-item>
        </div>
      </div>

      <el-form-item label="过敏药物">
        <div class="flex ac">
          <el-input v-model="formData.allergicMedications" placeholder="请输入" style="width: 1001px"></el-input>
          <el-button class="ml10" plain>编辑</el-button>
        </div>
      </el-form-item>

      <el-form-item label="摘要(备注)" label-width="80px">
        <div class="flex ac">
          <el-input v-model="formData.remarks" placeholder="请输入" style="width: 935px"></el-input>
          <el-button class="ml10" plain>参保信息查询</el-button>
        </div>
      </el-form-item>

      <div class="flex ac">
        <div class="flex ac">
          <el-form-item label="传染病报告时间" label-width="110px">
            <el-date-picker v-model="formData.infectiousDiseaseReportTime" type="date" placeholder="请选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="费别" label-width="40px">
            <el-select v-model="formData.feeType" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </div>

        <div class="flex ac">
          <el-form-item label="病人去向">
            <el-select v-model="formData.patientDisposition" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="血压" label-width="40px">
            <div class="flex ac">
              <el-input v-model="formData.bloodPressure1" placeholder="请输入" style="width: 91px"></el-input>
              <span class="mr10 ml10">/</span>
              <el-input v-model="formData.bloodPressure2" placeholder="请输入" style="width: 91px"></el-input>
              <el-button class="ml10" plain>审批病种查询</el-button>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.patientInfo {
  .form-inline .el-input {
    --el-input-width: 150px;
  }

  .form-inline .el-select {
    --el-select-width: 150px;
  }

  .form-inline :deep(.el-date-editor) {
    --el-date-editor-width: 150px
  }

}
</style>
